// 加载状态组件 - 显示翻译进度

// 唯一ID，用于确保元素的唯一性
const LOADING_ID = "deepseek-translate-loading";
const PROGRESS_BAR_ID = "deepseek-translate-progress-bar";

// 调试辅助函数
function debug(message, data) {
  const prefix = "[DeepSeek加载]";
  if (data !== undefined) {
    console.log(`${prefix} ${message}`, data);
  } else {
    console.log(`${prefix} ${message}`);
  }
}

// 检查加载状态是否存在
function isLoadingVisible() {
  return !!document.getElementById(LOADING_ID);
}

// 显示加载状态
export function showLoading(message = "正在翻译中...") {
  debug("显示加载状态", message);

  // 如果已经存在，先移除它
  hideLoading();

  // 创建加载状态容器
  const loadingElement = document.createElement("div");
  loadingElement.id = LOADING_ID;
  loadingElement.style.cssText = `
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 10000;
  `;

  // 创建加载动画
  const spinnerElement = document.createElement("div");
  spinnerElement.style.cssText = `
    width: 50px;
    height: 50px;
    border: 5px solid #f3f3f3;
    border-top: 5px solid #3498db;
    border-radius: 50%;
    animation: deepseek_spin 1s linear infinite;
    margin-bottom: 20px;
  `;

  // 添加CSS动画
  const styleElement = document.createElement("style");
  styleElement.textContent = `
    @keyframes deepseek_spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
  `;
  document.head.appendChild(styleElement);

  // 创建加载文本
  const textElement = document.createElement("div");
  textElement.id = "deepseek-translate-loading-text";
  textElement.style.cssText = `
    color: white;
    font-size: 16px;
    font-family: sans-serif;
  `;
  textElement.textContent = message;

  // 将元素添加到容器中
  loadingElement.appendChild(spinnerElement);
  loadingElement.appendChild(textElement);

  // 将容器添加到文档中
  document.body.appendChild(loadingElement);
  debug("加载状态元素已添加到DOM", { id: LOADING_ID });
}

// 更新加载状态文本
export function updateLoading(message) {
  debug("更新加载状态文本", message);
  const textElement = document.getElementById(
    "deepseek-translate-loading-text"
  );

  if (textElement) {
    textElement.textContent = message;
  } else {
    debug("警告: 无法找到加载状态文本元素，重新显示加载状态");
    showLoading(message);
  }
}

// 隐藏加载状态
export function hideLoading() {
  debug("尝试隐藏加载状态");
  try {
    const loadingElement = document.getElementById(LOADING_ID);
    if (loadingElement) {
      // 使用直接的DOM API移除元素
      loadingElement.remove();
      debug("加载状态元素已从DOM移除");
    } else {
      debug("加载状态元素不存在，无需移除");
    }
  } catch (error) {
    console.error("移除加载状态时出错:", error);
    debug("移除加载状态时出错", error);

    // 作为后备方案，尝试使用另一种方式移除
    try {
      const loadingElement = document.getElementById(LOADING_ID);
      if (loadingElement && loadingElement.parentNode) {
        loadingElement.parentNode.removeChild(loadingElement);
        debug("使用后备方法移除了加载状态元素");
      }
    } catch (backupError) {
      debug("后备移除方法也失败", backupError);
    }
  }
}

// 创建带有进度的加载状态
export function showProgressLoading(message = "正在翻译中...") {
  debug("显示带进度的加载状态", message);
  // 显示基本加载状态
  showLoading(message);

  // 添加进度条
  const loadingElement = document.getElementById(LOADING_ID);
  if (loadingElement) {
    const progressContainer = document.createElement("div");
    progressContainer.style.cssText = `
      width: 200px;
      height: 10px;
      background-color: #f3f3f3;
      border-radius: 5px;
      margin-top: 20px;
      overflow: hidden;
    `;

    const progressBar = document.createElement("div");
    progressBar.style.cssText = `
      width: 0%;
      height: 100%;
      background-color: #3498db;
      transition: width 0.3s ease;
    `;
    progressBar.id = PROGRESS_BAR_ID;

    progressContainer.appendChild(progressBar);
    loadingElement.appendChild(progressContainer);
    debug("进度条已添加");
  } else {
    debug("警告: 无法添加进度条，加载状态元素不存在");
  }
}

// 更新进度条
export function updateProgress(percent) {
  debug("更新进度", percent);
  const progressBar = document.getElementById(PROGRESS_BAR_ID);

  if (progressBar) {
    progressBar.style.width = `${percent}%`;
  } else {
    debug("警告: 进度条元素不存在");
  }
}

// 导出检查加载状态的函数
export { isLoadingVisible };

// 下载中提示
export function showDownloadingMessage(format) {
  debug(`显示${format}下载中提示`);
  // 显示基本加载状态，但使用下载相关文本
  showLoading(
    `正在准备下载${format === "markdown" ? "Markdown" : "PDF"}文件...`
  );
}

// 隐藏下载中提示
export function hideDownloadingMessage() {
  debug("隐藏下载中提示");
  hideLoading();
}

// 显示成功提示
export function showSuccessMessage(message) {
  debug("显示成功提示", message);
  showToast(message, "#4CAF50");
}

// 显示错误提示
export function showErrorMessage(message) {
  debug("显示错误提示", message);
  showToast(message, "#f44336");
}

// 显示Toast提示
function showToast(message, backgroundColor) {
  // 创建Toast元素
  const toast = document.createElement("div");
  toast.style.cssText = `
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: ${backgroundColor};
    color: white;
    padding: 15px 20px;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    z-index: 10000;
    font-family: sans-serif;
    font-size: 14px;
    transition: opacity 0.3s ease;
  `;

  toast.textContent = message;
  document.body.appendChild(toast);

  // 3秒后自动淡出并移除
  setTimeout(() => {
    toast.style.opacity = "0";
    setTimeout(() => {
      if (document.body.contains(toast)) {
        document.body.removeChild(toast);
      }
    }, 300);
  }, 3000);
}
